<template>
  <div>
    <el-card>
      <el-row>
        <el-button type="primary" @click="userDialogVisible = true"><i class="el-icon-circle-plus el-icon--left" />授权新用户</el-button>
        <el-button type="primary" @click="remove"><i class="el-icon-remove el-icon--left" />批量解除绑定</el-button>
      </el-row>
      <el-row>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="selection" width="55" sortable />
          <el-table-column prop="fullName" label="用户全称" sortable />
          <el-table-column prop="name" label="用户简称" sortable />
          <el-table-column prop="phone" label="用户手机号码" sortable />
          <el-table-column prop="remark" label="用户备注信息" sortable />
          <el-table-column prop="date" label="绑定时间" sortable />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="300">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="userPermissionVisible = true">修改权限</el-button>
              <el-button size="mini" type="text" @click="remove">解除绑定</el-button>
              <el-button size="mini" type="text">操作日志</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-card>
    <!-- bind new user dialog -->
    <el-dialog :visible.sync="userDialogVisible" title="绑定新用户" width="50%">
      <unbound-user />
      <span slot="footer" class="dialog-footer">
        <el-button @click="userDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="userDialogVisible = false">绑 定</el-button>
      </span>
    </el-dialog>

    <!-- bind permission -->
    <el-dialog :visible.sync="userPermissionVisible" title="修改权限" width="50%">
      <bind-permission />
      <span slot="footer" class="dialog-footer">
        <el-button @click="userPermissionVisible = false">取 消</el-button>
        <el-button type="primary" @click="userPermissionVisible = false">绑 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import UnboundUser from './unboundUser'
import BindPermission from './bindPermission.vue'
export default {
  components: {
    UnboundUser,
    BindPermission
  },
  data() {
    return {
      userDialogVisible: false,
      userPermissionVisible: false,
      tableData: [
        {
          id: 1,
          fullName: '1407234-王小虎',
          name: '王小虎',
          phone: '123456789',
          remark: '周三值班人员',
          date: '2018年09月28日14:25:42',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ]
    }
  },
  methods: {
    remove() {
      this.$confirm('此操作将解除该用户权限, 是否继续?', '解除绑定', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>
